<template>
  <dw-page-warpper>
    <dw-menu-datagrid-form
      :is-tree="true"
      :columns="columns"
      :data-grid-title="dataGridTitle"
      v-model:activeFormData="formData"
      :render-form-title="renderFormTitle"
      :get-page-http-config="getPageHttpConfig"
      :del-info-http-config="delInfoHttpConfig"
      :del-list-http-config="delListHttpConfig"
      :get-info-http-config="getInfoHttpConfig"
      :add-info-http-config="addInfoHttpConfig"
      :update-info-http-config="updateInfoHttpConfig"
    >
      <template #formSlot>
        <table class="dw-form-table">
          <tbody>
            <tr>
              <td class="dw-td-label"><span class="required">菜单编码</span></td>
              <td>
                <el-form-item
                  prop="menuCode"
                  :rules="[
                    {
                      required: true,
                      message: '请填写菜单编码!',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-input v-model="formData.menuCode" placeholder="请输入菜单编码..."></el-input>
                </el-form-item>
              </td>
              <td class="dw-td-label"><span class="required">菜单名称</span></td>
              <td>
                <el-form-item
                  prop="menuName"
                  :rules="[
                    {
                      required: true,
                      message: '请填写菜单名称!',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-input v-model="formData.menuName" placeholder="请输入菜单名称..."></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="dw-td-label"><span class="required">菜单层级</span></td>
              <td>
                <el-form-item prop="layer">
                  <el-select v-model="formData.layer" placeholder="请选择菜单层级">
                    <el-option v-for="item in layerList" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </el-form-item>
              </td>
              <td class="dw-td-label"><span class="required">父级节点</span></td>
              <td></td>
            </tr>

            <tr v-if="formData.layer === 2">
              <td class="dw-td-label"><span class="required">外框</span></td>
              <td></td>
              <td class="dw-td-label"><span class="required">图标</span></td>
              <td></td>
            </tr>
            <tr>
              <td class="dw-td-label"><span class="required">是否页面</span></td>
              <td>
                <el-switch v-model="formData.pageFlag" :active-value="1" :inactive-value="0" />
              </td>
              <td class="dw-td-label"><span class="required">类型</span></td>
              <td></td>
            </tr>
            <tr v-if="formData.pageFlag === 1">
              <td class="dw-td-label"><span class="required">地址</span></td>
              <td colspan="3">
                <el-form-item
                  prop="menuUrl"
                  :rules="[
                    {
                      required: true,
                      message: '请填写地址!',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-input v-model="formData.menuUrl" placeholder="请填写路由地址..."></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr v-if="formData.pageFlag === 1">
              <td class="dw-td-label">界面元素</td>
              <td colspan="3"></td>
            </tr>
            <tr>
              <td class="dw-td-label"><span>状态</span></td>
              <td>
                <el-form-item prop="status">
                  <el-switch v-model="formData.status" :active-value="1" :inactive-value="0" />
                </el-form-item>
              </td>
              <td class="dw-td-label"><span>排序号</span></td>
              <td>
                <el-form-item prop="sortNo">
                  <el-input-number v-model="formData.sortNo"></el-input-number>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="dw-td-label">说明</td>
              <td :colspan="3">
                <el-form-item prop="menuMemo">
                  <el-input type="textarea" v-model="formData.menuMemo"></el-input>
                </el-form-item>
              </td>
            </tr>
          </tbody>
        </table>
      </template>
    </dw-menu-datagrid-form>
  </dw-page-warpper>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { IAddInfoHttpConfig, IColumn, IDelInfoHttpConfig, IDelListHttpConfig, IGetInfoHttpConfig, IGetPageHttpConfig, IUpdateInfoHttpConfig } from '@/types/menu-datagrid-form';
import type { IMenu } from './menu';

defineOptions({
  name: 'SysMenu',
});
const dataGridTitle = '菜单列表';
const renderFormTitle = (stateValue: 'add' | 'edit', data: IMenu) => {
  if (stateValue === 'add') {
    return '菜单信息';
  } else {
    return `【${data.menuName}】菜单编辑`;
  }
};
const formData = ref<IMenu>({
  id: '',
  menuCode: '',
  menuName: '',
  layer: 1,
  pageFlag: 0,
  pageType: 1,
  menuIcon: '',
  frameCode: '',
  menuUrl: '',
  permission: '',
  operationList: [],
  menuMemo: '',
  query: '',
  parentId: '',
  ancestors: '',
  status: 1,
  sortNo: 1,
});

const layerList = [
  {
    value: 1,
    label: '第一层',
  },
  {
    value: 2,
    label: '第二层',
  },
  {
    value: 3,
    label: '第三层',
  },
];
const parentList: IMenu[] = [];

const menuTypeList = [
  {
    value: 1,
    label: '目录',
  },
  {
    value: 2,
    label: '菜单',
  },
];
const columns = ref<IColumn[]>([
  {
    prop: 'menuName',
    label: '菜单名称',
    width: 200,
  },
  {
    prop: 'menuCode',
    label: '菜单编码',
    width: 200,
    align: 'left',
  },
  {
    prop: 'url',
    label: '路径',
    align: 'left',
  },
  {
    prop: 'sortNo',
    label: '排序',
    align: 'right',
    width: 100,
  },
]);
const delInfoHttpConfig: IDelInfoHttpConfig = {
  url: '/admin-api/sys/menu/#{id}',
  delInfoMsgEmphasize: '#{menuName}',
};
const delListHttpConfig: IDelListHttpConfig = {
  url: '/admin-api/sys/menu/tree',
};

const getPageHttpConfig: IGetPageHttpConfig<IMenu> = {
  url: '/admin-api/sys/menu/tree',
};
const getInfoHttpConfig: IGetInfoHttpConfig<IMenu> = {
  url: '/admin-api/sys/menu/#{id}',
};
const addInfoHttpConfig: IAddInfoHttpConfig<IMenu> = {
  url: '/admin-api/sys/menu',
};
const updateInfoHttpConfig: IUpdateInfoHttpConfig<IMenu> = {
  url: '/admin-api/sys/menu',
};
</script>
<style lang="scss" scoped></style>
